<!-- Comp -->
<div class="io-pagination {{simple ? 'simple' : ''}}" style="{{style}}">
    {{#if simple}}
    <div class="fl pageheight">
        <!-- 每页加载 <io-select model="pageSize" style="width:60px">
            <io-selectOption value="10">10</io-selectOption>
            <io-selectOption value="20">20</io-selectOption>
            <io-selectOption value="30">30</io-selectOption>
            <io-selectOption value="40">40</io-selectOption>
            <io-selectOption value="50">50</io-selectOption>
        </io-select> 条， -->
        共 <strong>{{count}}</strong> 条记录
    </div>
    <div class="fr pageheight">
        第
        <strong>{{page}}</strong>页，
        共{{pageTotal}}页
    </div>
    <div class="bottom">
        <a  class="{{page == 1 ? 'gray':''}}" href="javascript://" on-click="previous()">上一页</a>
        <a  class="{{page == pageTotal ? 'gray':''}}" href="javascript://" on-click="next()">下一页</a>
    </div>
    {{else}}
    <div class="pageLeft">
            每页加载 <io-select model="pageSize" style="width:50px">
                <io-selectOption value="10">10</io-selectOption>
                <io-selectOption value="20">20</io-selectOption>
                <io-selectOption value="30">30</io-selectOption>
                <io-selectOption value="40">40</io-selectOption>
                <io-selectOption value="50">50</io-selectOption>
            </io-select> 条，
            共 <strong>{{count}}</strong> 条记录
    </div>
    <div class="pageRight">
            第 <strong>{{page}}</strong> 页，
            共 <strong>{{pageTotal}}</strong> 页
    </div>
    <div class="page">
        <ul class="normal">
            <li>
                <a class="{{page == 1 ? 'gray':''}}" href="javascript://" title="上一页" on-click="previous()">
                    <i class="material-icons">{{{'&#xe314;'}}}</i>
                </a>
            </li>
            <li>
                <a class="{{page == 1 ? 'choice':''}}" href="javascript://"  title="1" on-click="firstpage()">1</a>
            </li>
            {{#if page > 5}}
            <li>
                <a class="spot" href="javascript:return false;" onclick="return false;" style="cursor: default;opacity: 0.8;">...</a>
            </li>
            {{/if}}
            {{#if page === 5}}
            <li>
                <a href="javascript://" title="{{page-3}}" on-click="selectPage(page-3)">{{page-3}}</a>
            </li>
            {{/if}}
            {{#if page-2 > 1}}
            <li>
                <a href="javascript://" title="{{page-2}}" on-click="selectPage(page-2)">{{page-2}}</a>
            </li>
            {{/if}}
            {{#if page-1 > 1}}
            <li>
                <a href="javascript://" title="{{page-1}}" on-click="selectPage(page-1)">{{page-1}}</a>
            </li>
            {{/if}}
            {{#if page != 1 && page != pageTotal}}
            <li>
                <a href="javascript://" title="{{page}}" style="background: #1e55af;color: white;border: 1px solid #1e55af;">{{page}}</a>
            </li>
            {{/if}}
            {{#if page+1 < pageTotal}}
            <li>
                <a href="javascript://" title="{{page+1}}" on-click="selectPage(page+1)">{{page+1}}</a>
            </li>
            {{/if}}
            {{#if page+2 < pageTotal}}
            <li>
                <a href="javascript://" title="{{page+2}}" on-click="selectPage(page+2)">{{page+2}}</a>
            </li>
            {{/if}}
            {{#if pageTotal - page === 4}}
            <li>
                <a href="javascript://" title="{{page+3}}" on-click="selectPage(page+3)">{{page+3}}</a>
            </li>
            {{/if}}
            {{#if pageTotal - page >= 5}}
            <li>
                <a class="spot" href="javascript://" onclick="" style="cursor: default;opacity: 0.8;">...</a>
            </li>
            {{/if}}
            {{#if pageTotal > 1}}
            <li>
                <a class="{{page == pageTotal ? 'choice':''}}" href="javascript://" title="{{pageTotal}}" on-click="lastpage()">{{pageTotal}}</a>
            </li>
            {{/if}}
            <li>
                <a class="{{page == pageTotal ? 'gray':''}}" href="javascript://" title="下一页" on-click="next()">
                    <i class="material-icons">{{{'&#xe315;'}}}</i>
                </a>
            </li>
        </ul>
    </div>
    {{/if}}
</div>